<template>
<div class="container">
    <div class="header">
        <NavBar title="个人资料" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
       <div class="item flex align-items space-between">
           <div class="left">头像</div>
           <div class="right">
               <img :src="info.avatar" alt="">
           </div>
       </div>
       <div class="item flex align-items space-between">
           <div class="left">ID</div>
           <div class="right">{{ info.user_sn }}</div>
       </div>
       <div class="item flex align-items space-between">
           <div class="left">昵称</div>
           <div class="right">{{ info.nickname }}</div>
       </div>
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon
} from "vant";
import {
    getUserInfo
} from '@/model/api';
import heading from '@/assets/heading.png'
export default {
    components: {
        NavBar,
        Icon
    },
    data() {
        return {
            heading,
            info: "",
        };
    },
    methods: {
        handerClick(){
            storage.set('userToken',"");
        }
    },
    async created() {
        let {
            code,
            data
        } = await getUserInfo();
        if (code == 1) {
            this.info = data;
        }
    }
};
</script>

<style lang="less" scoped>
.main {
    background-color: #fff;
    padding: 0 14px;
}
.item{
    width: 100%;
    height: auto;
    padding:18px 0;
    border-bottom: 1px solid #EAEAEA;
    .left{
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9F9F9F;
    }
    .right{
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
        img{
            width:60px;
            height: 60px;
            border-radius: 50%;
            overflow:hidden;
        }
        .iconfont{
            font-size: 12px;
            color: #CCCCCC;
        }
    }
}
.item:last-child{
    border-bottom: 0;
}
</style>
